<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
		<style>
			body{
				margin: 0px;
				padding: 0px;
			}
			#container {
				width: 1010px;
				height: 870px;
				margin: auto;
			}
			#top{
				width: 100%;
				height: 70px;
				background-color: #F9F9F9;
				float: left;
			}
			.img{
					margin-top: 14px;
					left: 25px;
				    display: inline-block;
				    margin-right: 12px;
				    width: 80px;
				    height: 40px;
				    line-height: 40px;
				    text-align: center;
				    border-radius: 20px;
				    overflow: hidden;
				    background-image: url(//img1.bdstatic.com/static/albumslist/images/tab_default_2f1cc11.jpg);
				    background-size: cover;
				    background-repeat: no-repeat;
				    background-position: center center;
				    position: relative;
				    cursor: pointer;
			}
			.text{
				    font-size: 13px;
				    color: #FFF;
				    position: relative;
			}
			.cover{
				    background-color: rgba(0,0,0,.3);
				    width: 100%;
				    height: 100%;
				    position: absolute;
				    left: 0;
				    top: 0;
				    backdrop-filter: blur(2px);
				    border-radius: 20px;
			}
			.selected{
				background-color: #4E6EF2;
			}
			img{
				width: 1010px;
				height: 500px;	
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="top" @click="click()">
				<div value='0' class="img" style="background-image: url(https://emoji.cdn.bcebos.com/yunque/renwu.jpg);">
					<div class="cover" :class="selected"></div>
					<span class="text">人物</span>
				</div>
				<div value='1' class="img" style="background-image: url(https://emoji.cdn.bcebos.com/yunque/jianzhu.jpg);">
					<div class="cover" :class="selected"></div>
					<span class="text">建筑</span>
				</div>
				<div value='2' class="img" style="background-image: url(https://emoji.cdn.bcebos.com/yunque/dongwu.jpg);">
					<div class="cover"></div>
					<span class="text">动物</span>
				</div>
				<div value='3' class="img" style="background-image: url(https://emoji.cdn.bcebos.com/yunque/fengjinglvxing.jpg);">
					<div class="cover"></div>
					<span class="text">风景旅行</span>
				</div>
				<div value='4' class="img" style="background-image: url(https://emoji.cdn.bcebos.com/yunque/shejisucai.jpg);">
					<div class="cover"></div>
					<span class="text">设计素材</span>
				</div>
				<div value='5' class="img" style="background-image: url(https://emoji.cdn.bcebos.com/yunque/huihua.jpg);">
					<div class="cover"></div>
					<span class="text">绘画</span>
				</div>
				<div value='6' class="img" style="background-image: url(https://emoji.cdn.bcebos.com/yunque/canyinmeishi.jpg);">
					<div class="cover"></div>
					<span class="text">餐饮美食</span>
				</div>
				<div value='7' class="img" style="background-image: url(https://emoji.cdn.bcebos.com/yunque/zhiwu.jpg);">
					<div class="cover"></div>
					<span class="text">植物</span>
				</div>
				<div value='8' class="img" style="background-image: url(https://emoji.cdn.bcebos.com/yunque/shishanghuazhuang.jpg);">
					<div class="cover"></div>
					<span class="text">时尚化妆</span>
				</div>
				<div value='9' class="img" style="background-image: url(https://emoji.cdn.bcebos.com/yunque/jiaju.jpg);">
					<div class="cover"></div>
					<span class="text">家具</span>
				</div>
			</div>
			<div id="footer">
				<div id="app">
					<img src="图片/1.png"/>
				</div>
			</div>
			
		</div>
		<script>
			let app = new Vue({
				el:'#top',
				data:{
					selected:'',
					index:0
					// text:['人物','建筑','动物','风景旅行','设计素材','绘画','餐饮美食','植物','时尚化妆','家具']
				},
				methods:{
					click:function(){
						let i = this.index
						this.value = i
					}
				}
			})
		</script>
	</body>
</html>
